<template>
    <div>
        <!-- 搜索卡片  查询条件：地址 -->
        <el-card>
            <el-form :model="queryForm" :inline="true">
                <el-form-item label="地 址" >
                    <el-input type="text" placeholder="输入地址" v-model="queryForm.address" size="small"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button size="small" type="primary" @click="handleSearch">搜索</el-button>
                    <el-button size="small" @click="handleReset">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <!-- 数据卡片 -->
        <el-card class="mt12" style="margin-top: 10px">
            <div class="handel-btns">
                <div class="left-btns">
                    <el-button size="small" icon="el-icon-plus" type="primary" plain @click="handleAdd()">新增</el-button>
                </div>
            </div>
            <!-- 数据表格 -->
            <el-table
            :data="paymentList"
            v-loading="loading"
            border
            fit
            :header-cell-style="{background:'#f8f8f9',color:'#5a516e',padding:'10px 0px'}"
            :cell-style="{padding:'5px 0px'}"
            style="margin: 10px 0">
                <el-table-column align="center" label="ID" width="80" prop="ID">
                    <template slot-scope="scope">
                    {{ scope.row.id }}
                    </template>
                </el-table-column>
                <el-table-column label="住 址" align="center">
                    <template slot-scope="scope">
                    <span>{{ scope.row.address }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="水费" align="center">
                    <template slot-scope="scope">
                        <span>{{ '￥' + (scope.row.waterFee?scope.row.waterFee:0) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="电费" align="center">
                    <template slot-scope="scope">
                        <span>{{ '￥' + (scope.row.electricFee?scope.row.electricFee:0) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button size="small" type="success" plain icon="el-icon-wallet" @click="handlePay(scope.row.id,scope.row.address)">充值</el-button>
                        <el-button size="small" type="primary" plain icon="el-icon-edit" @click="handleEdit(scope.row.id)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
                    :current-page="queryForm.pageNum" 
                    :page-size="queryForm.pageSize"
                    :total="total"
                    :page-sizes="[10,20,50,100]"
                    layout="total,sizes,prev,pager,next"
                    @current-change='handleCurrentChange'
                    @size-change='handleSizeChange'>
                </el-pagination>
        </el-card>
        <!-- 新增和编辑弹窗 -->
        <el-dialog :title="title" :visible.sync="show"  width="40%">
            <el-form :model="submitForm" :inline="true" label-width="120px" ref="submitForm">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="住址" prop="address">
                            <el-select v-model="address.id" placeholder="单元" style="width:100px;" :disabled="onlyShow" @change="unitChange">
                                <el-option v-for="(item,index) in unitList" :key="index" :value="item.id" :label="item.id+'单元'"></el-option>
                            </el-select>
                            <el-select v-model="address.ridgepole" placeholder="栋" :disabled="!address.id || onlyShow" style="width:80px;margin-left:5px;">
                                <el-option v-for="(i,index) in unit.ridgepole" :key="index" :value="i" :label="i+'栋'"></el-option>
                            </el-select>
                            <el-select v-model="address.floor" placeholder="楼" :disabled="!address.ridgepole  || onlyShow" style="width:80px;margin-left:5px;">
                                <el-option v-for="(i,index) in unit.floor" :key="index" :value="i" :label="i+'楼'"></el-option>
                            </el-select>
                            <el-select v-model="address.house" placeholder="门牌" :disabled="!address.floor  || onlyShow" style="width:95px;margin-left:5px;">
                                <el-option v-for="(i,index) in unit.house" :key="index" :value="i" :label="address.floor + '0' + i + '号'"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="充值水费" prop="waterFee">
                            <el-input type="number" step="50" placeholder="请输入充值水费" v-model="submitForm.waterFee"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="充值电费" prop="electricFee">
                            <el-input type="number" step="50" placeholder="请输入充值电费" v-model="submitForm.electricFee"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="dialog-footer" slot="footer" style="margin-right:40px;">
                <el-button type="primary" @click="handleSubmit">确定</el-button>
                <el-button @click="handleCancel">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { selectAll,pay,getPayment,updatePayment } from '@/api/payment'
    import { selectAll as selectUnitAll } from '@/api/unit'
    export default {
        name:'User',
        data(){
            return{
                loading: true,
                userId:this.$Cookie.get("userId"),
                submitForm:{},
                title:"新增",
                show:false,
                total:120,
                queryForm:{
                    pageNum:1,
                    pageSize:10
                },
                sexList:['男','女','保密'],
                selectList:[],
                paymentList:[],
                password:'',
                unit:0,
                unitList:[],
                address:{},
                onlyShow:false,
                editFlag:false
            }
        },
        //创建网页后查询调用数据
        created(){
            this.getList()
        },
        methods:{
            //调用接口提交数据 - 进行添加和编辑操作的弹窗
            handleSubmit(){
                this.$refs['submitForm'].validate((valid)=>{
                    if(this.address.house){
                        this.submitForm.address = this.address.id + '单元' + this.address.ridgepole + '栋' + this.address.floor + '楼' + this.address.floor + '0' + this.address.house + '号'
                    }
                    this.submitForm.waterFee = this.submitForm.waterFee?this.submitForm.waterFee:0
                    this.submitForm.electricFee = this.submitForm.electricFee?this.submitForm.electricFee:0
                    if(this.editFlag){ //调用编辑缴费接口
                        this.submitForm.updateBy = this.$Cookie.get("username")
                        updatePayment(this.submitForm).then(res=>{
                            this.show = false
                            this.editFlag = false
                            this.getList()
                            this.submitForm = {}
                        }).catch(err=>{
                            console.log(err)
                        })
                    }
                    if(this.submitForm.id && !this.editFlag){ //调用充值缴费接口 - 充值
                        this.submitForm.updateBy = this.$Cookie.get("username")
                        pay(this.submitForm).then(res=>{
                            this.show = false
                            this.getList()
                            this.submitForm = {}
                        }).catch(err=>{
                            console.log(err)
                        })
                    }
                    if(!this.submitForm.id && !this.editFlag){ //调用充值缴费接口 - 新增
                        this.submitForm.createBy = this.$Cookie.get("username")
                        pay(this.submitForm).then(res=>{
                            this.show = false
                            this.getList()
                            this.submitForm = {}
                        }).catch(err=>{
                            console.log(err)
                        })
                    }
                    
                })
            },
            //重置搜索
            handleReset(){
                this.queryForm = {
                    pageNum:1,
                    pageSize:10
                }
                this.getList()
            },
            //按条件搜索
            handleSearch(){
                this.queryForm.pageNum = 1
                this.getList()
            },
            //修改每页大小
            handleSizeChange(pageSize){
                this.queryForm.pageSize = pageSize
                this.queryForm.pageNum = 1
                this.getList()
            },
            //当前页修改
            handleCurrentChange(pageNum){
                this.queryForm.pageNum = pageNum
                this.getList()
            },
            //调用接口分页查询数据
            getList(){
                this.loading = true
                selectAll(this.queryForm).then(res=>{
                    this.paymentList = res.data.records
                    this.total = res.data.total
                    selectUnitAll({pageNum:1,pageSize:100}).then(resp=>{
                        this.unitList = resp.data.records
                        this.loading = false
                    })
                    
                }).catch(err=>{})
            },
            //添加 - 打开添加弹窗
            handleAdd(){
                
                this.show = true
                this.title = "新增"
                this.address={}
                this.onlyShow = false
            },
            //取消 - 关闭弹窗
            handleCancel(){
                this.show = false
                this.submitForm = {}
                this.editFlag = false
            },
            //充值 - 打开充值弹窗
            handlePay(id,address){
                //调接口获取最新数据
                this.title = "充值"
                this.submitForm.id = id
                this.submitForm.address = address
                this.show = true
                const addrStr = address
                if(addrStr){
                    this.address = {
                        id:parseInt(addrStr.split('单元')[0]),
                        ridgepole:parseInt(addrStr.split('单元')[1].split('栋')[0]),
                        floor:parseInt(addrStr.split('栋')[1].split('楼')[0]),
                        house:parseInt(addrStr.split('楼')[1].split('号')[0])%(parseInt(addrStr.split('栋')[1].split('楼')[0])*100)
                    }
                    if(this.address.house){
                        this.unit = this.unitList[parseInt(addrStr.split('.')[0])-1]
                    } 
                }else{
                    this.address={}
                }
                this.onlyShow = true
            },
            //编辑 - 打开充值弹窗
            handleEdit(id){
                this.show = true
                getPayment(id).then(res=>{
                    //调接口获取最新数据
                    this.title = "编辑"
                    this.submitForm = res.data
                    const addrStr = res.data.address
                    if(addrStr){
                        this.address = {
                            id:parseInt(addrStr.split('单元')[0]),
                            ridgepole:parseInt(addrStr.split('单元')[1].split('栋')[0]),
                            floor:parseInt(addrStr.split('栋')[1].split('楼')[0]),
                            house:parseInt(addrStr.split('楼')[1].split('号')[0])%(parseInt(addrStr.split('栋')[1].split('楼')[0])*100)
                        }
                        if(this.address.house){
                            this.unit = this.unitList[parseInt(addrStr.split('.')[0])-1]
                        } 
                    }else{
                        this.address={}
                    }
                    this.onlyShow = true
                    this.editFlag = true
                }).catch(err=>{
                    console.log(err)
                })
            },
            //选中的单元
            unitChange(val){
                this.unit = this.unitList[val-1]
                this.address = {id:val}
            }
        }
    }
</script>

<style scoped>
    .el-form-item{
        margin: 10px;
    }
    .address-form .el-select .el-input {
        border-color: #409EFF;
        width: 50px;
    }
</style>